<template>
  <view>
    <!-- 遮罩层 -->
    <view class="zhezhao"></view>
    <!-- 头部图片 -->
    <view class="top_box">
    <!-- 自定义导航条 -->
      <u-navbar back-text="今日午餐" :back-text-style="textStyle" back-icon-color="#fff" back-icon-size='50' :border-bottom="false" :background="background" z-index="999">
        <template #right>
          <view class="" style="padding-right: 30rpx;display: flex;align-items: center;">
            <u-icon name="reload" color="#fff" size="50"></u-icon>
          </view>
        </template>
        </u-navbar>
      <!-- 餐品名字 -->
      <view class="food_name">
        <view class="f_title">香煎原切牛排</view>
        <view class="f_title">
          <!-- <image src="https://s1.ax1x.com/2023/05/05/p9Uwv8K.png" mode="" v-for="item in 5"></image> -->
          <u-rate :count="count" v-model="value" size="38" gutter="15" active-color="#FCC844" inactive-color="#fff"></u-rate>
        </view>
      </view>
    </view>
    <!-- 成分占比 -->
    <view class="cf_card">
      <!-- 标题 -->
      <view class="cf_title">营养和热量</view>
      <view class="cf_body">
        <!-- 左侧图表 -->
        <view class="body_left">
          <!-- 饼状图 -->
          <qiun-data-charts type="pie" :opts="opts" :chartData="chartData" canvas2d="true" />
        </view>
        <!-- 中间数据 -->
      <!--  <view class="body_right">
          <view class="item">
            <text class="item_name">蛋白质</text>
            <text class="item_bili">30%</text>
            <text class="hanliang">22.6克</text>
          </view>
         <view class="item">
          <text class="item_name">脂肪</text>
          <text class="item_bili">18%</text>
          <text class="hanliang">8.5克</text>
          </view>
          <view class="item">
            <text class="item_name">碳水化合物</text>
            <text class="item_bili">58%</text>
            <text class="hanliang">37.9克</text>
          </view>
        </view> -->
        <!-- 右侧总热量 -->
        <!-- view class="reliang">
          <view class="shuzhi">200</view>
          <view class="danwei">千卡</view>
        </view> -->
      </view>
    </view>
    <!-- 包含食物 -->
    <view class="food_box">
      <view class="food_title">包含的食物</view>
      <!-- 具体食物 -->
      <view class="food_item">
        <!-- 左侧食物图片 -->
      <view class="food_pic">
        <image src="https://img.js.design/assets/img/64242199ad69f066040649ad.png" mode=""></image>
      </view>
      <!-- 右侧含量 -->
      <view class="item_r">
        <view class="item_r_l">
          <text class="item_r_title">牛排</text>
          <text class="item_r_count">1.0个</text>
        </view>
        <view class="item_r_r">
          <text class="item_r_re">100千卡</text>
          <image src="https://s1.ax1x.com/2023/04/19/p9FHZFJ.png" mode=""></image>
        </view>
      </view>
      </view>
      
      <view class="food_item">
        <!-- 左侧食物图片 -->
      <view class="food_pic">
        <image src="https://img.js.design/assets/img/642421c631aefe4dc81d8b71.png" mode=""></image>
      </view>
      <!-- 右侧含量 -->
      <view class="item_r">
        <view class="item_r_l">
          <text class="item_r_title">番茄酱</text>
          <text class="item_r_count">10.0毫升</text>
        </view>
        <view class="item_r_r">
          <text class="item_r_re">10千卡</text>
          <image src="https://s1.ax1x.com/2023/04/19/p9FHZFJ.png" mode=""></image>
        </view>
      </view>
      </view>
      
      <view class="food_item">
        <!-- 左侧食物图片 -->
      <view class="food_pic">
        <image src="https://img.js.design/assets/img/6424221d31aefe4dc81da608.png" mode=""></image>
      </view>
      <!-- 右侧含量 -->
      <view class="item_r">
        <view class="item_r_l">
          <text class="item_r_title">香菜</text>
          <text class="item_r_count">5.0片</text>
        </view>
        <view class="item_r_r">
          <text class="item_r_re">30千卡</text>
          <image src="https://s1.ax1x.com/2023/04/19/p9FHZFJ.png" mode=""></image>
        </view>
      </view>
      </view>
      
      <view class="food_item">
        <!-- 左侧食物图片 -->
      <view class="food_pic">
        <image src="https://img.js.design/assets/img/64242240ad69f06604068acd.png" mode=""></image>
      </view>
      <!-- 右侧含量 -->
      <view class="item_r">
        <view class="item_r_l">
          <text class="item_r_title">柠檬水</text>
          <text class="item_r_count">100.0毫升</text>
        </view>
        <view class="item_r_r">
          <text class="item_r_re">60千卡</text>
          <image src="https://s1.ax1x.com/2023/04/19/p9FHZFJ.png" mode=""></image>
        </view>
      </view>
      </view>
    </view>
    <!-- 制作步骤 -->
    <view class="zhizuo">
      <!-- 标题 -->
      <view class="zhizuo_title">制作步骤</view>
      <!-- 制作步骤 -->
      <view class="zhizuo_step">
        <view class="step_item">
          <view class="item_name">步骤一：</view>
          <view class="item_content">
            处理肉。韩式烤肉有腌制的，有不腌制的，对于牛肋条来说，腌制之后更嫩
          </view>
        </view>
        
        <view class="step_item">
          <view class="item_name">步骤二：</view>
          <view class="item_content">
           煎肉。煎肉用平底锅，对于五花肉来说，完全可以不用放任何的油
          </view>
        </view>
        
        <view class="step_item">
          <view class="item_name">步骤三：</view>
          <view class="item_content">
           小菜。卷心菜切成丝，可以将菜切成一小块一小块的，在进行切丝
          </view>
        </view>
        
        <view class="step_item">
          <view class="item_name">步骤四：</view>
          <view class="item_content">
           蘸料。挖一勺韩式蒜蓉辣酱，一般都比较浓，也没办法直接蘸，加入较多的白糖（每份5-10克），加入一些水，搅和均匀
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 自定义导航背景
        background:{
          backgroundColor: 'rgba(0,0,0,0)',
        },
        // 自定义导航文字样式
        textStyle:{
          color:'#fff',
          fontSize:'50rpx'
        },
        count: 5, // 星星数量
        value: 2,// 选择星星的数量
        // 图表数据
        chartData: {},
        // 饼状图配置项
        opts: {
          color: ["#FF7953", "#00DA9F", "#FDD060"],
          // 图例配置项
          legend:{
            position:'right', // 相对图表的位置
            float:'bottom', // 图例位置对齐方式
            fontColor:["#FF7953", "#00DA9F", "#FDD060"], // 字体颜色
            lineHeight:18, // 行高
            margin:0, // 外边距
            fontSize:12 // 字体大小
          },
          padding: [5, 5, 10, 10],
          enableScroll: false,
          extra: {
            pie: {
              activeRadius: 5,
              customRadius:35, // 半径
              labelWidth: 5, // 数据标签到饼图外圆连线的长度
              borderWidth: 3, // 分割线的宽度
              borderColor: "#FFFFFF" // 分割线颜色
            },
          }
        }
      };
    },
    onPageScroll(e) {
      if(e.scrollTop>=200){
        console.log(11);
        this.background.backgroundColor='rgba(192,192,192,1)'
      }
      else{
        this.background.backgroundColor='rgba(0,0,0,0)'
      }
    },
    methods:{
      // 获取饼状图数据
      getServerData() {
        //模拟从服务器获取数据时的延时
        setTimeout(() => {
          //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
          let res = {
            series: [{
              data: [{
                "name": "脂肪",
                "value": 50
              }, {
                "name": "蛋白质",
                "value": 30,
              }, {
                "name": "碳水化合物",
                "value": 20
              }]
            }]
          };
          this.chartData = JSON.parse(JSON.stringify(res));
        }, 500);
      }
    },
    onReady() {
      this.getServerData();
    },
  }
</script>

<style lang="scss">
  page{
    padding-bottom: 30rpx;
  }
  .zhezhao{
    position: absolute;
    top: 0;
    width: 100%;
    height: 600rpx;
    background: linear-gradient(180deg, rgba(114, 114, 114, 0.8) 0%, rgba(204, 204, 204, 0) 100%);
    z-index: 99;
  }
  
  .top_box{
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 600rpx;
    background-image: url('https://img.js.design/assets/img/642420d19b06204f6a054293.png');
    background-size: 120% 100%;
    background-position: center;
    
    // 餐品名称
    .food_name{
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: absolute;
      z-index: 100;
      bottom: 0;
      width: 100%;
      height: 300rpx;
      padding: 0 40rpx;
      // background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, rgba(204, 204, 204, 0) 100%);
      
      .f_title{
        display: flex;
        font-size: 40rpx;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        image{
          width: 38rpx;
          height: 38rpx;
          margin-right: 20rpx;
          margin-top: 18rpx;
        }
      }
    }
  }
  // 成分占比
  .cf_card{
    position: relative;
    top: -60rpx;
    width: 628rpx;
    height: 380rpx;
    border-radius: 32rpx;
    margin: 0 auto;
    padding-top: 40rpx;
    padding-left: 30rpx;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
    // 标题
    .cf_title{
      height: 92rpx;
      line-height: 92rpx;
      font-size: 48rpx;
      font-weight: 400;
      color: rgba(73, 69, 75, 1);
    }
    .cf_body{
      display: flex;
      align-items: center;
      margin-top: 30rpx;
      height: 200rpx;
      
      .body_left{
        width: 100%;
        height: 200rpx;
      }
      // 中间数据
      .body_right {
        width: 380rpx;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-bottom: 10rpx;
        .item {
          display: flex;
          align-items: center;
          // margin-bottom: 30rpx;
          .item_name{
            width: 150rpx;
          }
          .item_bili{
            font-size: 24rpx;
            font-weight: 400;
            color: rgba(166, 166, 166, 1);
            margin-right: 20rpx;
          }
          .hanliang{
            font-size: 24rpx;
            font-weight: 400;
            color: rgba(166, 166, 166, 1);
          }
        }
        // 小点
        .item:nth-child(1)::before {
          content: '';
          display: inline-block;
          width: 20rpx;
          height: 20rpx;
          margin-right: 18rpx;
          margin-left: 10rpx;
          border-radius: 50%;
         background: rgba(253, 208, 96, 1);
        }
        .item:nth-child(2)::before {
          content: '';
          display: inline-block;
          width: 20rpx;
          height: 20rpx;
          margin-right: 18rpx;
          margin-left: 10rpx;
          border-radius: 50%;
          background: rgba(0, 218, 159, 1);
        }
        .item:nth-child(3)::before {
          content: '';
          display: inline-block;
          width: 20rpx;
          height: 20rpx;
          margin-right: 18rpx;
          margin-left: 10rpx;
          border-radius: 50%;
          background: rgba(255, 121, 83, 1);
        }
      }
      // 右侧总热量
      .reliang{
        width: 100rpx;
        text-align: center;
          font-weight: 400;
        .shuzhi{
          font-size: 36rpx;
          color: rgba(0, 0, 0, 1);
        }
        .danwei{
          font-size: 24rpx;
          color: rgba(166, 166, 166, 1);
        }
      }
    }
  }
  // 包含的食物
  .food_box{
      padding: 0 54rpx;
    .food_title{
      font-size: 36rpx;
      font-weight: 400;
      color: rgba(73, 69, 75, 1);
    }
    .food_item{
      display: flex;
      height: 100rpx;
      margin-top: 38rpx;
    // 食物图片
    .food_pic{
      width: 100rpx;
      height: 100rpx;
      border-radius: 16rpx;
      overflow: hidden;
      image{
        width: 100%;
        height: 100%;
      }
    }
    // 右侧
    .item_r{
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 492rpx;
      height: 100%;
      margin-left: 50rpx;
      
      .item_r_l{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
          font-size: 28rpx;
          font-weight: 400;
        .item_r_title{
          color: rgba(73, 69, 75, 1);
        }
        .item_r_count{
          color: rgba(167, 167, 167, 1);
        }
      }
      .item_r_r{
        display: flex;
        align-items: center;
        .item_r_re{
          font-size: 28rpx;
          font-weight: 400;
          color: rgba(166, 166, 166, 1);
        }
        image{
          width: 40rpx;
          height: 40rpx;
        }
      }
    }
    }
    
  }
  // 制作步骤
  .zhizuo {
    width: 696rpx;
    // height: 996rpx;
    border-radius: 32rpx;
    margin: 0 auto;
    margin-top: 60rpx;
    padding: 30rpx 0 30rpx 28rpx;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 4rpx 8rpx 0px rgba(0, 0, 0, 0.25);
  
    // 标题
    .zhizuo_title {
      font-size: 36rpx;
      font-weight: 400;
      color: rgba(73, 69, 75, 1);
    }
    // 制作步骤
    .zhizuo_step{
      .step_item{
        margin-top: 50rpx;
        font-size: 36rpx;
        font-weight: 400;
        color: rgba(73, 69, 75, 1);
        .item_name{
          margin-bottom: 10rpx;
        }
        .item_content{
          line-height: 1.5;
        }
      }
    }
    
  }
</style>
